<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书管理</title>
    <style type="text/css">
        .grid {
            margin: auto;
            width: 530px;
            text-align: center;
        }

        .grid table {
            border-top: 1px solid #C2D89A;
            width: 100%;
            border-collapse: collapse;
        }

        .grid th, td {
            padding: 10px;
            border: 1px dashed #F3DCAB;
            height: 35px;
            line-height: 35px;
        }

        .grid th {
            background-color: #F3DCAB;
        }

        .grid .book {
            padding-bottom: 10px;
            padding-top: 5px;
            background-color: #F3DCAB;
        }

        .grid .total {
            height: 30px;
            line-height: 30px;
            background-color: #F3DCAB;
            border-top: 1px solid #C2D89A;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="grid">
        <h1>图书管理</h1>
        <div class="book">
            <div>
                <label for="id">编号:</label>
                <input type="text" id="id" v-model="id" :disabled="flag" v-focus>
                <label for="name">名称:</label>
                <input type="text" id="name" v-model="name">
                <button @click="handle" :disabled="submitFlag">提交</button>
            </div>
        </div>
        <div class="total">
            <span>图书总数：</span>
            <span>{{total}}</span>
        </div>
        <table>
            <thrad>
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>时间</th>
                    <th>操作</th>
                </tr>
            </thrad>
            <tbody>
            <tr :key="item.id" v-for="item in books">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date | format("yyyy-MM-dd hh:mm:ss")}}</td>
                <td>
                    <a href="" @click.prevent="toEdit(item.id)">修改</a>
                    <a href="">|</a>
                    <a href="" @click.prevent="deleteBook(item.id)">删除</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    /*过滤器(格式化日期)*/
    Vue.filter("format", function (val, arg1) {
        //格式化字符串
        function dateFormat(date, format) {
            if (typeof date == "string") {
                var mts = date.match(/(\/Date\((\d+)\/)/);
                if (mts && mts.length >= 3) {
                    date = parseInt(mts[2])
                }
            }
            date = new Date(date);
            if (!date || date.toUTCString() == "Invalid Date") {
                return "";
            }
            var map = {
                "M": date.getMonth() + 1, //月份
                "d": date.getDate(), //日
                "h": date.getHours(), //小时
                "m": date.getMinutes(), //分
                "s": date.getSeconds(), //秒
                "q": Math.floor((date.getMonth() + 3) / 3), //季度
                "S": date.getMilliseconds(), //毫秒
            };

            format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
                var v = map[t];
                if (v != undefined) {
                    if (all.length > 1) {
                        v = '0' + v;
                        v = v.substr(v.length - 2);
                    }
                    return v;
                } else if (t == 'y') {
                    return (date.getFullYear() + "").substr(4 - all.length);
                }
                return all;
            });
            return format;
        }

        return dateFormat(val, arg1);
    })

    /*自定义指令(获取元素焦点)*/
    Vue.directive('focus', {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el) {
            // 聚焦元素
            el.focus()
        }
    })

    /*计算属性(验证图书存在性)*/


    var vue = new Vue({
        el: "#app",
        data: {
            id: "",
            name: "",
            flag: false,
            submitFlag: false,
            books: []
        },
        methods: {
            handle: function () {
                if (this.flag) {
                    //编辑操作
                    //就是根据当前ID去更新数组中对应的数据
                    this.books.some((item) => {
                        if (item.id == this.id) {
                            item.name = this.name;
                            //完成操作之后需要终止循环
                            return true;
                        }
                    });
                    this.flag = false;
                    //清空表单
                    this.id = "";
                    this.name = "";
                } else {
                    //添加图书
                    var book = {};
                    book.id = this.id;
                    book.name = this.name;
                    book.date = new Date().getTime()
                    this.books.push(book);
                    //清空表单
                    this.id = "";
                    this.name = "";
                }
            },
            toEdit: function (id) {
                //禁止修改ID
                this.flag = true;

                // console.log(id);
                // 根据id查询出要编辑的数据
                var book = this.books.filter(function (item) {
                    return item.id == id;
                })
                console.log(book);
                //把获取到的消息填充到表单
                this.id = book[0].id;
                this.name = book[0].name;
            },
            deleteBook: function (id) {
                //删除图书
                // var index = this.books.findIndex(function (item) {
                //     return item.id = id;
                // });
                //根据索引删除数组元素
                // this.books.splice(index, 1);
                // --------------------------------
                // 方法2：通过filter方法进行删除
                this.books = this.books.filter(function (item) {
                    return item.id != id;
                })

            }
        },
        //计算属性
        computed: {
            total: function () {
                //计算图书的总数
                return this.books.length;
            }
        },
        //侦听器 验证
        watch: {
            id: function (val) {
                //验证图书名称是否存在
                var flag = this.books.some(function (item) {
                    return item.id == val;
                });
                if (flag) {
                    //图书名称存在
                    this.submitFlag = true;
                } else {
                    //图书名称不存在
                    this.submitFlag = false;
                }
            },
            name: function (val) {
                //验证图书名称是否存在
                var flag = this.books.some(function (item) {
                    return item.name == val;
                });
                if (flag) {
                    //图书名称存在
                    this.submitFlag = true;
                } else {
                    //图书名称不存在
                    this.submitFlag = false;
                }
            }
        },
        //生命周期 钩子函数
        mounted: function () {
            //触发时，模板已经可以使用了
            //一般此时用于获取后台数据，然后把数据填充到模板
            var data = [{
                id: 1,
                name: "三国演义",
                date: new Date().getTime() - 1000
            }, {
                id: 2,
                name: "水浒传",
                date: new Date().getTime() - 2000
            }, {
                id: 3,
                name: "三国演义",
                date: new Date().getTime() - 3000
            }, {
                id: 4,
                name: "西游记",
                date: new Date().getTime() - 4000
            }];

            this.books = data;
        }
    })
</script>
</body>
</html>
